import React, { Component } from 'react';
import { good_goodinfo, good_favlist, good_fav, good_unfav, good_shopcartadd, good_shopcartlist } from '../utils/api'
import { create_request_action, create_request_cel, create_request_shopcarlist } from '../store/actionCreators/index'
import { NavBar, Space, Swiper, Toast } from 'antd-mobile'
import { connect } from 'react-redux'
import { StarOutline, ShopbagOutline, SendOutline } from 'antd-mobile-icons'
import './Goodinfo.scss'
import { logDOM } from '@testing-library/react';

class Goodinfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            item: {},
            pice: '',
            val: false,
            pics: []
        }
    }
    componentDidMount() {
        // 获取详情商品信息
        good_goodinfo({ goodid: this.props.location.state.id }).then((res) => {
            this.setState({
                item: res.data.goodinfo,
                pice: res.data.goodinfo.salesPrice.value,
                pics: res.data.goodinfo.pics
            }
            )
        })

        this.setState(
            { val: this.bea() }
        )
    }

    // 返回上一页
    back() {
        this.props.history.go(-1)
    }

    // 点击收藏将商品添加至收藏列表
    collect() {

        if (this.state.val) {
            this.setState(
                { val: !this.state.val }
            )
            var id = JSON.parse(localStorage.getItem('userinfo')).id
            good_unfav({ userid: id, goodid: this.props.location.state.id }).then((res) => {
                if (res.data.code == 200) {
                    Toast.show({
                        icon: 'success',
                        content: '取消收藏！',
                    })
                }

            })
        } else {
            this.setState(
                { val: !this.state.val }
            )
            var userid = JSON.parse(localStorage.getItem('userinfo')).id
            // console.log(this.props.location.state.id);
            good_fav({ userid: userid, goodid: this.props.location.state.id }).then((res) => {

                if (res.data.code == 200) {
                    Toast.show({
                        icon: 'success',
                        content: '已收藏！',
                    })
                }
                this.props.request_list();

            })

        }
    }

    // 点击加入购物车
    addshopcar(goodid) {
        var id = JSON.parse(localStorage.getItem('userinfo')).id
        good_shopcartadd({ userid: id, goodid }).then((res) => {
            if (res.data.code == 200) {
                Toast.show({
                    icon: 'success',
                    content: '商品添加至购物车！',
                })
            }
        })
    }

    // 点击去往购物车
    toShopcart() {
        this.props.history.push({ pathname: '/index/shopcart' })
    }

    // 中间值，true或者false，用于判断商品是否已收藏
    bea() {
        var index = this.props.list.findIndex((item) => {
            return item.id === this.props.location.state.id
        })
        if (index == -1) {
            return false;
        } else {
            return true;
        }
    }

    render() {
        return (
            <div className='goodinfo'>
                <NavBar onBack={() => { this.back() }}>商品详情</NavBar>
                <div className="item">
                    <div className="img">
                        <Swiper autoplay loop defaultIndex={1}>
                            {
                                this.state.pics.map((item, index) => {
                                    return (
                                        <Swiper.Item key={index}>
                                            <img src={item} alt="" />
                                        </Swiper.Item>
                                    )
                                })
                            }
                        </Swiper>
                    </div>

                    <div className="price">
                        <div className="left">
                            <span>原价￥270</span>
                            <h3>活动价￥{parseInt(this.state.pice)}</h3>
                        </div>
                        <div className="right">
                            <span>距结束5天0小时</span>
                        </div>
                    </div>
                    <div className="botton">
                        <div className="you">
                            <span>包邮包税</span>
                        </div>
                        <div className="name">
                            <h5>{this.state.item.name}</h5>
                        </div>
                    </div>
                </div>
                <div className="bottom">
                    <div>
                        <span style={{ color: this.state.val ? 'red' : ' ' }} onClick={() => { this.collect() }}><StarOutline fontSize={28} /></span>
                        <p>收藏</p>
                    </div>
                    <div>
                        <span><SendOutline fontSize={26} /></span>
                        <p>分享</p>
                    </div>
                    <div>
                        <span><ShopbagOutline fontSize={28} /></span>
                        <p onClick={() => { this.toShopcart() }}>购物车</p>
                    </div>
                    <div className='btn'>
                        <div className="left" onClick={() => { this.addshopcar(this.props.location.state.id) }}>
                            加入购物车
                        </div>
                        <div className="right">
                            立即购买
                        </div>
                    </div>
                </div>
            </div >
        );
    }
}

// export default Goodinfo;

export default connect(
    (state) => { //注入(绑定)store中的数据到 组件的props中
        return {
            list: state.favlist
        }
    },
    (dispatch) => { //注入(绑定)方法 到组件的props中
        return {
            request_list: function () {
                dispatch(create_request_action())
            },

        }
    }
)(Goodinfo)